<template>
    <view class="address-box" @tap="selectAddress">
        <up-icon name="map" color="#303133" size="24"></up-icon>
        <view class="address-text" v-if="addressInfo.province">
            {{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.area }}{{ addressInfo.address }}
        </view>
        <view class="address-text" v-else>
            请选择地址
        </view>
        <up-icon name="arrow-right" color="#606266" size="22"></up-icon>
    </view>
</template>
<script setup>

const emits = defineEmits(['selectAddress'])
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
const value = useModel(props, 'modelValue')
const addressInfo = ref({})
const selectAddress = () => {
    uni.$on('selectAddress', (data) => {
        console.log('data', data)
        addressInfo.value = data
        value.value = data.id
        emits('selectAddress', data)
    })
    qly.page.open('/pages/my/address/index', {source: 'placeOrder'})
}
</script>
<style scoped lang="scss">
.address-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8rpx;
    padding: 20rpx;
    border-top: 12rpx solid #f5f5f5;
    border-bottom: 12rpx solid #f5f5f5;
    
    .address-text {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #303133;
    }
}
</style>
